<template>
	<view class="login" >
		<!-- 账号密码输入框 -->
		<view class="logoContainer">
			<image class="img" src="../../static/images/logo.png"></image>
			<view class="title">安全管理</view>
		</view>
		<view class="logoContainer welcomeContainer">
			<view class="welcome">欢迎登录</view>
			<view class="welcome">能源集团安全管理系统</view>
		</view>
		<view class="container">
			<view class="input_row" style="padding-right: 30rpx;">
				<image src="../../static/images/login_14.png"></image>
				<u-input placeholder="请输入手机号" prop="mobile" v-model="form.mobile" type="text"></u-input>
			</view>
			<view class="input_row" style="padding-right: 30rpx;">
				<image src="../../static/images/login_08.png"></image>
				<u-input placeholder="请输入密码" prop="password" v-model="form.password" type="password"></u-input>
			</view>
			<!-- <view class="input_row"  v-if="captchaEnable">
				<u-input placeholder="请输入验证码" v-model="code" type="text"></u-input>
				<image :src="code_img" class="code_img" @click="getCode()"></image>
			</view> -->
<!--			<view class="check_row  mui-checkbox">-->
<!--				<checkbox-group @change="checkboxChange">-->
<!--					<label>-->
<!--						<checkbox id="chkRem" type="checkbox" :checked="rembPwd" @tap="rembPwd=!rembPwd" />-->
<!--						记住密码-->
<!--					</label>-->
<!--				</checkbox-group>-->

<!--			</view>-->
			<view class="login_btn" @click="login">
				登录
			</view>
		</view>
		<u-toast ref="loginToast" type="loading" message="登录中"></u-toast>
		<u-toast ref="uToast" type="success" message="登录成功"></u-toast>
		<!-- <image class="bottom_img" src="../../static/images/login_14.png"></image> -->
	</view>
</template>

<script>
	import {
		login,
		smsLogin,
		sendSmsCode
	} from '@/api/system/auth.js'
	export default {
		data() {
			return {
				captchaEnable: false,
				mobile: "",
				password: "",
				code: "",
				code_img: "",
				uuid: "",
				rembPwd: true,
				form: {
					mobile: '15253155555',
					code: '',
					password: 'dddd',
				}
			};
		},
		mounted() {
			//this.getCode()

			let that = this;
			const HCuserName = uni.getStorageSync('HCuserName');
			const HCpassword = uni.getStorageSync('HCpassword');

			if (HCuserName && HCpassword) {
				that.mobile = HCuserName;
				that.password = HCpassword;
			} else {
				that.mobile = '';
				that.password = '';
			}
		},
		methods: {
			getCode() {
				// 只有开启的状态，才加载验证码。默认开启
				if (!this.captchaEnable) {
					return;
				}
				// 请求远程，获得验证码
				getCodeImg().then(data => {

					this.captchaEnable = data.enable;
					if (this.captchaEnable) {
						that.code_img = "data:image/gif;base64," + data.img;
						that.uuid = data.uuid
					}
				});


			},
			//去验证登陆
			login() {

				//这个地方代码是为了不通过后台登录，直接点击登录就进去了
				// uni.switchTab({
				// 	url: "/pages/home/homepage",
				// 	fail(e) {
				// 		log(e)
				// 	}
				// })
				// return;

				const {
					mobile,
					code,
					password
				} = this.form;
				if (mobile == "") {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					});
					return false;
				}
				if (password == "") {
					uni.showToast({
						title: '请输入密码',
						icon: "none"
					});
					return false;
				}
				/* if (this.code == "") {
					uni.showToast({
						title: '请输入验证码',
						icon: "none"
					});
					return false;
				} */


				uni.showLoading({
					title: '登录中'
				});

				login(mobile, password)
					.then(data => {
						// 登陆成功
						var that = this;

						if (that.rembPwd) {
							uni.setStorageSync('HCuserName', that.mobile);
							uni.setStorageSync('HCpassword', that.password)

						} else {
							uni.removeStorageSync('HCuserName');
							uni.removeStorageSync('HCpassword');
						}
						// this.$refs.uToast.show()
						this.$store.commit('setToken', data);

						uni.hideLoading();
						let obj = {
							type: 'success',
							message: "登录成功",
							url: '/pages/home/homepage',
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png'
						}

						this.showToast(obj)


						// uni.switchTab({
						// 	url: "/pages/home/homepage",
						// 	fail(e) {
						// 		log(e)
						// 	}
						// })
					}).catch(errors => {}).finally(() => {
						this.loading = false;
					})
			},

			showToast(params) {
				this.$refs.uToast.show({
					...params,
					complete() {
						params.url && uni.switchTab({
							url: params.url
						})
					}
				})
			},

			checkboxChange: function(e) {
				// console.log(e.detail.value.length);
				if (e.detail.value.length == 1) {
					uni.setStorageSync('HCuserName', this.mobile);
					uni.setStorageSync('HCpassword', this.password)

				} else {
					uni.removeStorageSync('HCuserName');
					uni.removeStorageSync('HCpassword');
				}
			}
		}
	}
</script>

<style>
  page {
    background-image: url('');
		background-size: 100% 100vh;
  }
</style>
<style scoped lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	.login {
		width: 100%;
		height: 100vh;
		position: relative;

		.container {
			position: absolute;
			width: 100%;
			// margin-top: 10vh;
			// top: 30vh;
		}

		.img {
			width: 220rpx;
			height: 220rpx;
			margin-top: 8vh;
		}

		.title_img {
			width: 80%;
			height: 47rpx;
			display: block;
			margin: 10px auto;
		}

		.input_row {
			width: 80%;
			margin: auto;
			border: 1px solid #4a72d4;
			height: 96rpx;
			padding-top: 3rpx;
			border-radius: 40rpx;
			margin-bottom: 25rpx;
			padding-left: 40rpx;
			display: flex;
			align-items: center;

			// margin-top: 50rpx;
			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 20rpx;
			}

			.code_img {
				width: 250rpx;
				height: 100rpx;
				margin-bottom: 4rpx;
				border-radius: 1.5rem;
				left: 20rpx;

			}
		}

		.check_row {
			width: 80%;
			margin: auto;
			//border: 1px solid #4a72d4;
			height: 96rpx;
			padding-top: 3rpx;
			border-radius: 2rem;
			margin-bottom: 25rpx;
			padding-left: 40rpx;
			display: flex;
			align-items: center;
		}

		.mui-checkbox input[type='checkbox']:checked::before {
			color: #00bbb1;
		}

		.login_btn {
			width: 80%;
			margin: 2px auto;
			height: 96rpx;
			line-height: 96rpx;
			color: #fff;
			font-size: 40rpx;
			border-radius: 40rpx;
			text-align: center;
			background-color: #0776E2;
		}

		.bottom_img {
			width: 45%;
			height: 65rpx;
			display: block;
			margin: 20px auto;
		}
	}

	.logoContainer {
		margin: 0 auto;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		// height: 35vh;
	}

	.title {
		width: 100%;
		height: 124px;
		font-size: 100rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-style: italic;
		color: #FDFFFE;
		text-align: center;
		text-shadow: 0px 17px 9px rgba(6, 64, 161, 0.39);
	}

	.welcome {
		width: 100%;
		// height: 145px;
		font-size: 42rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #578AD0;
		// line-height: 90px;
		text-align: center;
	}

	.welcomeContainer {
		margin: 5vh 0;
	}
</style>
